<template>
		<view class="cart-item">
			<view class="cart-item-left">
				<label class="radio">
					<radio :checked="goods.goods_state" :value="goods.goods_id" @click="changeRadio(goods.goods_id,goods.goods_state)" color="#ff0000"/><text></text>
				</label>
				<image class="cart-item-img" :src="goods.goods_small_logo || defaultPic" mode="" @click="goGoodsDetail(goods.goods_id)"></image>
			</view>
			<view class="cart-item-right">
				<text class="cart-name">{{goods.goods_name}}</text>
				<view class="cart-item-right-bottom">
					<text class="cart-price">{{goods.goods_price | toPrice}}元</text>
					<uni-number-box @change="changeCount($event,goods.goods_id)" :value="goods.goods_count"></uni-number-box>
				</view>
			</view>
		</view>
</template>

<script>
	import {mapMutations} from 'vuex'
 	export default {
		name:"cart-item",
		data() {
			return {
				defaultPic: 'https://www.qqjpg.com/uploads/allimg/201123/1-201123105J62K.jpg'
			};
		},
		props:{
			goods:{
				Default:{},
				Type:'object'
			}
		},
		filters:{
			toPrice(price){
				return Number(price).toFixed(2)
			}
		},
		methods:{
			...mapMutations('mcart',['changeRadioState','changeGoodsCount']),
			changeRadio(goods_id,goods_state){
				// console.log(goods_id,goods_state);
				this.changeRadioState({goods_id,goods_state})
			},
			changeCount(value,goods_id){
				this.changeGoodsCount({goods_id:goods_id,goods_count:value})
			},
			goGoodsDetail(goods_id){
				console.log('sd');
				uni.navigateTo({
					url:'/subpkg/goods_detail/goods_detail?goods_id='+goods_id
				})
			}
		}
	}
</script>

<style lang="scss">
.cart-item {
	display: flex;
	align-items: center;
	width: 100%;
	height: 80px;
	.cart-item-left {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding: 10px;
		width: 40%;
		height: 100%;
		overflow: hidden;
		.cart-item-img {
			margin-left: 5px;
			object-fit: fill;
			width: 100%;
			height: 100%;
		}
	}
	.cart-item-right {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 60%;
		height: 100%;
		.cart-name {
			font-size: 14px;
			color: #717171;
			display: inline-block;
			text-indent: 12px;
			width: 100%;
			height: 40px;
			overflow: hidden;
			white-space: 2;
			text-overflow: ellipsis;
		}
		.cart-price {
			display: inline-block;
			color: #ff0000;
			font-size: 14px;
		}
	}
	
}
.cart-item-right-bottom {
			display: flex;
			justify-content: space-around;
		}
// /deep/ .uni-numbox .uni-numbox-btns{
// 			background: #ffffff;
// 		    box-shadow: 0 0 5px #969595;
// 		    border-radius: 5px;
// }
</style>